<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="name">
        <el-input v-model="list.filter.name" placeholder="场所名称">
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>
      <el-form-item prop="areaCode">
        <AllRegionSelect
          v-model="list.filter.areaCode"
          :props="{ checkStrictly: true }"
        />
      </el-form-item>
      <el-form-item prop="status">
        <Status v-model="list.filter.status" />
      </el-form-item>
      <el-form-item prop="type">
        <el-select
          v-model="list.filter.type"
          filterable
          clearable
          placeholder="场所类型"
        >
          <el-option
            v-for="item in gaodeDict[5] && gaodeDict[5].children[1].children"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="reset">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <AuthButton @click="c" name="新增" />
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column label="场所名称" prop="name" />
      <el-table-column label="场所地址" prop="address">
        <template slot-scope="{ row }">
          {{ row.areaName + row.address }}
        </template>
      </el-table-column>
      <el-table-column label="场所类型" prop="type">
        <template slot-scope="{ row }">
          {{ typeNameToString(gaodeDict[5].children[1].children, row.type) }}
        </template>
      </el-table-column>
      <el-table-column label="联系电话" prop="telephone" />
      <el-table-column label="营业时间" prop="businessTime" />
      <el-table-column label="启用状态" width="80" align="center">
        <template slot-scope="{ row: { id, status } }">
          <KiPopSwitch
            v-bind="popSwitchProps(status)"
            @change="updateStatus({ id, status: status ^ 1 })"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding">
        <template slot-scope="{ row }">
          <auth-button @click="u({ id: row.id }, 'config')" name="编辑" />
          <auth-button @click="d({ id: row.id })" name="删除" />
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      :show.sync="form.show"
      :title="formTitle"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      ref="formRef"
      :loading="form.loading"
    >
      <template #el-form>
        <el-form-item label="场所名称" prop="name" verify>
          <el-input
            v-model="form.data.name"
            placeholder="请输入场所名称"
            maxlength="30"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="场所类型" prop="type" verify>
          <el-select
            v-model="form.data.type"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in gaodeDict[5] && gaodeDict[5].children[1].children"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属地点" prop="countyCode" verify>
          <AllRegionSelect v-model="form.data.countyCode" />
        </el-form-item>
        <el-form-item label="详细地址" prop="address" :verify="{ maxLength: 100 }">
          <div style="display: flex; justify-content: space-between">
            <el-input v-model="form.data.address" style="width: 100%" clearable>
              <el-button slot="append" @click="showCoordPicker = true">
                地图选点
              </el-button>
            </el-input>
            <CoordPicker
              :show.sync="showCoordPicker"
              :lng.sync="form.data.longitude"
              :lat.sync="form.data.latitude"
              :address.sync="form.data.address"
              :city="
                $refs.RegionSelect &&
                  $refs.RegionSelect.label &&
                  $refs.RegionSelect.label.split('/')[0]
              "
            />
          </div>
        </el-form-item>
        <el-form-item label label-width="0">
          <el-col :span="12">
            <el-form-item label="经度" prop="longitude" verify>
              <el-input v-model="form.data.longitude" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度" prop="latitude" verify>
              <el-input v-model="form.data.latitude" clearable />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="营业时间">
          <el-col :span="11">
            <el-form-item prop="businessStartTime">
              <el-time-picker
                placeholder="选择时间"
                v-model="form.data.businessStartTime"
                value-format="HH:mm"
                format="HH:mm"
                style="width: 100%"
              ></el-time-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center">-</el-col>
          <el-col :span="11">
            <el-form-item prop="businessEndTime">
              <el-time-picker
                placeholder="选择时间"
                v-model="form.data.businessEndTime"
                value-format="HH:mm"
                format="HH:mm"
                style="width: 100%"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="联系电话" prop="telephone">
          <el-input v-model="form.data.telephone"></el-input>
        </el-form-item>
        <el-form-item label="封面图片" prop="coverPath">
          <Imgpond
            v-model="form.data.coverPath"
            value-type="string"
            :count="1"
            aspectRatio="140/110"
          />
        </el-form-item>
        <el-form-item label="绑定店铺" prop="subMchId">
          <SubMchSelect v-model="form.data.subMchId"></SubMchSelect>
        </el-form-item>
        <el-form-item label="图片列表" prop="detailPath">
          <Imgpond
            v-model="form.data.detailPath"
            value-type="array"
            aspectRatio="140/110"
          />
        </el-form-item>
      </template>
    </KiFormDialog>
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import { mapGetters } from 'vuex'
import GaodeCascader from '@/components/GaodeCascader'
import SubMchSelect from '@/components/SubMchSelect'

export default {
  mixins: [pageMixin],
  components: { GaodeCascader, SubMchSelect },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'one-travel-api/shopping',
      axiosConfig: {
        getList: {
          url: 'pageList'
        },
        r: config => ({
          url: 'view/' + config.id,
          method: 'GET'
        }),
        d: {
          method: 'DELETE'
        }
      },
      form: {
        data: {
          status: 1
        }
      }
    }),
  data () {
    return {
      showCoordPicker: false
    }
  },
  computed: {
    ...mapGetters(['gaodeDict'])
  },
  methods: {
    // 高德类型树结构，向上遍历，获取类型名称集合
    getGaodeTypeName (tree, id, path = []) {
      if (!tree) return []
      for (const data of tree) {
        path.push(data.label)
        if (data.id == id) return path
        if (data.children) {
          const findChildren = this.getGaodeTypeName(data.children, id, path)
          if (findChildren.length) return findChildren
        }
        // 不符合，从path删除数据
        path.pop()
      }
      return []
    },
    // 类型名称集合整合字符串
    typeNameToString (tree, id, start, end) {
      let path = this.getGaodeTypeName(tree, id)
      if (!path.length) return ''
      if (path.length == 1) {
        return path[0]
      } else if ((start, end)) {
        return path.slice(start, end).join('/')
      } else {
        return path.join('/')
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
